<template>
	<h2>reactive的使用</h2>
	<h3>{{ user.name }}</h3>
	<h3>{{ user.age }}</h3>
	<h3>{{ user.wife }}</h3>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue"

export default defineComponent({
	name: "App",
	// 需求:显示用户的相关数据，点击按钮，可以更新用户的相关信息数据
	/* 
		作用: 定义多个数据的响应式
		const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象
		响应式转换是“深层的”：会影响对象内部所有嵌套的属性
		内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的 
	*/

	setup() {
		// 把复杂数据变成响应式数据
		const user = reactive({
			name: "小明",
			age: 20,
			wife: {
				name: "小甜甜",
				age: 18,
				cars: ["奔驰", "宝马", "劳斯莱斯"]
			}
		})
		return {
			user
		}
	}
})
</script>
